<template>
  <view class="bugnow">
    <view class="bugnow-title-close">
      <view class="bugnow-title">商品配置</view>
      <image class="bugnow-close-icon" src="/static/images/ic_close.png" @click="cancelClick"></image>
    </view>
    <view class="bugnow-goods">
      <image class="bugnow-goods-img" :src="goodsInfo.goodsCoverImg"></image>
      <view class="bugnow-goods-price-name">
        <view class="bugnow-goods-price"><text><text style="font-size: 22rpx">￥</text>{{ goodsInfo.sellingPrice
            }}</text>
        </view>
        <view class="bugnow-goods-name">
          {{ goodsInfo.goodsName }}
        </view>
      </view>
    </view>

    <view class="bugnow-goods-specs" v-if="goodsInfo.specsList && goodsInfo.specsList.length > 0">
      <text class="bugnow-goods-specs-title">规格</text>
      <view class="bugnow-goods-specs-list">
        <view class="bugnow-goods-specs-item" :class="currentIndex === index ? 'active' : ''"
          v-for="(item, index) in goodsInfo.specsList" :key="index" @click="selectSpecsClick(item, index)">
          {{ item.specsName }}
        </view>
      </view>
    </view>

    <view class="bugnow-goods-num">
      <text class="bugnow-goods-num-text">数量</text>
      <uni-number-box v-model="goodsNum" :min="1" background="#fff" color="#000" @change="goodsNumChange" />
    </view>
    <view class="bugnow-bottom">
      <button class="bugnow-bottom-btn" @click="bugNowClick">立即下单</button>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  goodsInfo: {
    type: Object,
    default: function () {
      return {};
    },
  },
});

const emit = defineEmits(['cancel', 'bugNow', 'selectSpecs']);

// 规格
const currentIndex = ref(0);
const selectSpecsClick = (item, index) => {
  currentIndex.value = index;
  goodsNum.value = 1;
  emit('selectSpecs', item);
};

// 商品数量
const goodsNum = ref(1);
const goodsNumChange = (value) => {
  goodsNum.value = value;
};

// 关闭
const cancelClick = () => {
  emit('cancel');
};

// 立即购买
const bugNowClick = () => {
  const params = {
    id: props.goodsInfo.id,
    needCourseFlag: props.goodsInfo.needCourseFlag,
    goodsName: props.goodsInfo.goodsName,
    goodsIntro: props.goodsInfo.goodsIntro,
    sellingPrice: props.goodsInfo.sellingPrice,
    originalPrice: props.goodsInfo.originalPrice,
    specsFlag: props.goodsInfo.specsFlag,
    specsId: props.goodsInfo.specsId,
    specsName: props.goodsInfo.specsName,
    goodsNum: goodsNum.value,
    totalPrice: parseFloat((props.goodsInfo.sellingPrice * goodsNum.value).toFixed(2))
  };

  emit('bugNow', params);
};

onMounted(() => {
  goodsNum.value = 1;
  currentIndex.value = 0;
});
</script>

<style scoped lang="scss">
.bugnow {
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
}

.bugnow-title-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 88rpx;

  .bugnow-title {
    text-align: center;
    margin-top: 10rpx;
    color: rgba(32, 32, 32, 1);
    font-weight: 500;
    font-size: 32rpx;
  }

  .bugnow-close-icon {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    right: 30rpx;
    padding: 20rpx;
  }
}

.bugnow-goods {
  display: flex;
  align-items: center;
  margin-left: 35rpx;
  margin-right: 35rpx;

  .bugnow-goods-img {
    width: 134rpx;
    height: 134rpx;
    background: #d8d8d8;
    border-radius: 11rpx;
  }

  .bugnow-goods-price-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;

    .bugnow-goods-price {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #e53c3c;
    }

    .bugnow-goods-name {
      margin-top: 18rpx;
      font-size: 23rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #5f616f;
    }
  }
}

.bugnow-goods-specs {
  margin-top: 42rpx;
  margin-left: 38rpx;
  margin-right: 38rpx;
  display: flex;
  flex-direction: column;

  .bugnow-goods-specs-title {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 28rpx;
  }

  .bugnow-goods-specs-list {
    display: flex;
    flex-wrap: wrap;

    .bugnow-goods-specs-item {
      margin: 0 10rpx;
      margin-top: 28rpx;
      min-width: 150rpx;
      height: 70rpx;
      background: #f5f6fa;
      border-radius: 43rpx;
      padding: 0 23rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #5f616f;
    }

    .active {
      background: #eea9a91a;
      border-radius: 43rpx;
      border: 2rpx solid #a11012;
      color: #a11012;
    }
  }
}

.bugnow-goods-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 35rpx;
  padding-bottom: 8rpx;
  margin-top: 100rpx;
  margin-bottom: 145rpx;

  .bugnow-goods-num-text {
    color: rgba(29, 33, 41, 1);
    font-weight: 500;
    font-size: 28rpx;
  }
}

.bugnow-bottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 145rpx;
  background: #fff;
  display: flex;
  align-items: center;

  .bugnow-bottom-btn {
    width: 540rpx;
    height: 72rpx;
    background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
    border-radius: 56rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    line-height: 72rpx;
  }
}
</style>
